import React, { useState, useEffect } from "react";
import { connect } from "dva";
import { Spin, Modal, Icon, Table, Input, message, Button } from "antd";
import styles from "./index.less";

const AddGroupMember = ({
	isShowAddGroupMember,
	dispatch,
	userList,
	userListLoading,
	userListTotal,
	group,
}) => {
	const [loading, setLoading] = useState();
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);
	const [selectedRows, setSelectedRows] = useState([]);
	const [selectedRow, setSelectedRow] = useState({});
	const [ctsNameOrCtsNo, setCtsNameOrCtsNo] = useState("");

	const columns = [
		{
			title: "客服",
			dataIndex: "username",
			key: "username",
		},
		// {
		// 	title: "员工编号",
		// 	dataIndex: "jobNo",
		// 	key: "jobNo",
		// },
		{
			title: "状态",
			dataIndex: "disabled",
			key: "disabled",
			width: "120px",
			render: (text) => {
				return (
					<Button size='small' type={text ? "danger" : "primary"}>{text ? "禁用" : "启用"}</Button>
				);
			},
		},
	];

	const hide = () => {
		dispatch({
			type: "onlineSkillSet/showGroupMember",
			payload: { isShowAddGroupMember: false, },
		});
	};

	// 翻页
	const onChange = (page, pageSize) => {
		handleSearch({ id: group.id, ctsNameOrCtsNo: "", current: page, size: pageSize, });
	};

	// 确定
	const handleOk = () => {
		if (!selectedRowKeys.length) {
			message.error("请选择组成员");
			return;
		};
		setLoading(true);
		dispatch({
			type: "onlineSkillSet/addGroupMember",
			payload: {
				id: group.id,
				userIds: "[" + selectedRowKeys + "]",
			},
			callback: () => {
				setLoading(false);
				setSelectedRowKeys([]);
				setSelectedRows([]);
				hide();
				message.success("添加成功");
			},
		});
	};

	// 查询
	const handleSearch = (payload) => {
		dispatch({
			type: "onlineSkillSet/loadUserList",
			payload,
		});
	};

	return (
		<Modal title='选择组成员' visible={isShowAddGroupMember} onCancel={hide} onOk={handleOk} width={650} okButtonProps={{ loading, }} destroyOnClose>
			<Input
				placeholder='姓名、工号（按Enter检索）'
				style={{ marginBottom: "20px", }}
				onChange={(e) => {
					setCtsNameOrCtsNo(e.target.value);
				}}
				onPressEnter={() => {
					handleSearch({ id: group.id, ctsNameOrCtsNo, current: 1, size: 10, });
				}}
			/>

			<Table
				rowKey={(record) => record.userId}
				loading={userListLoading}
				columns={columns}
				scroll={{ y: "400px" }}
				dataSource={userList}
				pagination={{
					pageSize: 10,
					onChange: onChange,
					total: userListTotal,
				}}
				rowSelection={{
					selectedRowKeys,
					onChange: (selectedRowKeys, selectedRows) => {
						setSelectedRowKeys(selectedRowKeys);
						setSelectedRows(selectedRows);
					},
				}}
			/>
		</Modal>
	);
};

export default connect(({ onlineSkillSet }) => ({
	...onlineSkillSet,
}))(AddGroupMember);
